<template>
  <div class="home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
<!--          首页第一块展示区域-->
        <div class="swiper-slide sy">
            <!--          右侧图标导航-->
            <div class="righticon animate__animated"  :class="{animate__fadeInLeft:0==index}">

                    <i class="iconfont icon-huodong "  @mouseover="mouseover(1)"  @mouseleave="mouseleave(0)" @click="topath('activity')" ></i>


                    <i class="iconfont icon-chanpin " @mouseover="mouseover(2)"  @mouseleave="mouseleave(0)" @click="topath('aboutus')"></i>


                    <i class="iconfont icon-icon_huabanfuben"  @mouseover="mouseover(3)"  @mouseleave="mouseleave(0)" @click="topath('contactUs')"></i>


                    <i class="iconfont icon-fuwu"  @mouseover="mouseover(4)"  @mouseleave="mouseleave(0)"></i>

            </div>
<!--          背景图片区域-->
            <div class="bgimglist">

                <img src="../assets/img/bg2.jpg" class="bgimg animate__animated"  :class="{useopacity:0==ifopaciaty}"/>
                <img src="../assets/img/bg3.jpg" class="bgimg animate__animated"  :class="{useopacity:1==ifopaciaty}"/>
                <img src="../assets/img/bg4.jpg" class="bgimg animate__animated" :class="{useopacity:2==ifopaciaty}"/>
<!--                <div class="bgimg animate__animated"   :class="{useopacity:0==ifopaciaty}" style="background-image: url(src/assets/img/bg1.jpg)"></div>-->


            </div>
          <div class="title">  
            <div><img  src="../assets/img/bg1.png" class="titleimg animate__animated" :class="{animate__zoomIn:0==index}"/>  </div>
            <div class="animate__animated " :class="{animate__fadeInLeftBig:0==index}"> 专注于IT服务、信息化、智能化</div>
            <div class="animate__animated " :class="{animate__fadeInRightBig:0==index}">为社会服务注入智慧动力、 科技促进生产力</div>
          </div>

            <div class="bottominfo">www.RayGrid.com.cn 2013·广州睿格信息科技有限公司·版权所有粤ICP备12015963号-2</div>
        </div>
<!--          首页第二块展示区域-->
        <div class="swiper-slide sy2">
            <div class="righticon animate__animated"  :class="{animate__fadeInLeft:1==index}">

                <i class="iconfont icon-huodong "  @mouseover="mouseover(1)"  @mouseleave="mouseleave(0)" @click="topath('activity')" ></i>
                <i class="iconfont icon-chanpin " @mouseover="mouseover(2)"  @mouseleave="mouseleave(0)" @click="topath('aboutus')"></i>
                <i class="iconfont icon-icon_huabanfuben"  @mouseover="mouseover(3)"  @mouseleave="mouseleave(0)" @click="topath('contactUs')"></i>
                <i class="iconfont icon-fuwu"  @mouseover="mouseover(4)"  @mouseleave="mouseleave(0)"></i>

            </div>
<!--            背景图片区域-->
            <img src="../assets/img/sy2.jpg"></img>
          <div class="title2">
              <p class="animate__animated delay1" :class="{animate__rollIn:1==index}"> 平台协助协会为事务所及注师提供智能化服务,提高报备效率</p>
              <p class="animate__animated delay2" :class="{animate__backInLeft:1==index}">更有利注师继续教育,加强诚信执业检查,提升行业服务水平 !</p>
          </div>
        </div>
<!--          首页第三块展示区域-->
        <div class="swiper-slide sy3 ">
          <swiper-3 :index="index" />

        </div>


           <!-- 首页第四块展示区域 -->
        <div class="swiper-slide sy4" >
                <div class="imgshowlist">
                     <div class="imgitem"  v-for="(item,index) in imglist" :key="index" :style="{transform:item.activetransform}"   >
                         <div class="imgcontent">
                             <img :src="item.imgurl" />
                             <div class="imgtime">{{item.imgtime}}</div>
                         </div>
                         <p>{{item.imginfo}}</p>
                         <p>{{item.imginfo}}</p>
                     </div>             
                </div>
                <div class="lookmore">
                    查看更多
                </div>
        </div>
          <!-- 首页第五块展示区域 -->
          <div class="swiper-slide sy5" >
              <div class="imgshowlist">
                  <div class="imgitem"  v-for="(item,index) in imglist" :key="index" :style="{transform:item.activetransform}"   >
                      <div class="imgcontent">
                          <img :src="item.imgurl" />
                          <div class="imgtime">{{item.imgtime}}</div>
                      </div>
                      <p>{{item.imginfo}}</p>
                      <p>{{item.imginfo}}</p>
                  </div>
              </div>
              <div class="lookmore">
                  查看更多
              </div>

          </div>


      </div>
     
<!--        -->
<!--       如果需要分页器-->
       <div class="swiper-pagination"></div>
      <!-- 如果需要滚动条 -->
      <!--    <div class="swiper-scrollbar"></div>-->
     
    </div>
  </div>
</template>

<script>
import swiper from 'swiper'
import sal from 'sal.js'
import swiper3 from '../components/home/swiper3.vue'
export default {
    name: 'Home',
    components: {
        swiper3:swiper3
    },
    data() {
        return {
            index: 0,        // 控制每个模块的翻页的初始化动画
            iftada: 0,        //控制小图标的动画
            ifopaciaty:0,
               // 第四个轮播图的图片列表
            imglist:[
              {
                    imgurl:require('../assets/img/new1.jpg'),
                    imginfo:'睿格信息',
                    imgtime:'2012年12月28日',
                     activetransform:'rotateZ(15deg)',
                     delay:'0.2s',
                   
                },
                 {
                    imgurl:require('../assets/img/new2.jpg'),
                    imginfo:'睿格信息',
                     imgtime:'2012年12月28日',
                    activetransform:'rotateZ(-34deg)',
                    delay:'0.4s'
                },
                 {
                    imgurl:require('../assets/img/new3.jpg'),
                    imginfo:'睿格信息',
                     imgtime:'2012年12月28日',
                     activetransform:'rotateZ(13deg)',
                    delay:'0.6s'
                },
                 {
                    imgurl:require('../assets/img/new4.jpg'),
                    imginfo:'睿格信息2',
                     imgtime:'2012年12月28日',
                     activetransform:'rotateZ(40deg)',
                     delay:'0.8s'
                },
                 {
                    imgurl:require('../assets/img/new5.jpg'),
                    imginfo:'睿格信息',
                     imgtime:'2012年12月28日',
                     activetransform:'rotateZ(-23deg)',
                     delay:'0.9s'
                },
                  {
                    imgurl:require('../assets/img/new6.jpg'),
                    imginfo:'睿格信息',
                      imgtime:'2012年12月28日',
                     activetransform:'rotateZ(-22deg)',
                      delay:'0.2s'
                },
                  {
                    imgurl:require('../assets/img/new7.jpg'),
                    imginfo:'睿格信息',
                      imgtime:'2012年12月28日',
                     activetransform:'rotateZ(-6deg)',
                      delay:'0.4s'
                },
                   {
                    imgurl:require('../assets/img/new8.jpg'),
                    imginfo:'睿格信息',
                       imgtime:'2012年12月28日',
                     activetransform:'rotateZ(15deg)',
                      delay:'0.6s'
                },
                   {
                    imgurl:require('../assets/img/new9.jpg'),
                    imginfo:'睿格信息',
                       imgtime:'2012年12月28日',
                     activetransform:'rotateZ(-14deg)',
                      delay:'0.8s'
                },
                   {
                    imgurl:require('../assets/img/new10.jpg'),
                    imginfo:'睿格信息',
                       imgtime:'2012年12月28日',
                     activetransform:' rotateZ(18deg)',
                      delay:'0.9s'
                }
            ]

        }
    },
    mounted() {
        var timer=  setInterval(()=>{
               if(this.ifopaciaty==2){
                   this.ifopaciaty=0;
               }else{
                   this.ifopaciaty+=1;
               }


        },2000)

        sal({
            threshold: 1,
            once: false,
        });
        var myswiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            mousewheelControl: true,
            loop: false,
            pagination: '.swiper-pagination',
            paginationClickable: true,
            effect: 'fade',
            fade: {
                crossFade: true,
            },
            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
            //如果需要自动切换海报
            // autoplay: {
            //   delay: 1000,//时间 毫秒
            //   disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
            // },
            onSlideChangeEnd: (swiper) => {
                // alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
                this.index = swiper.activeIndex         
               this.$store.commit('updateIndex',{index:this.index})
               
            }

        })
    },
    methods: {
        mouseover(index) {

            this.iftada = index;
            console.log(this.iftada)
        },
        mouseleave(index) {
            this.iftada = index
        },
        topath(path){
            this.$router.push({
                path
            })
        }

    }


}
</script>
<style scoped lang="less">
@import "../assets/css/homecss/home";

</style>